<template>
  <div class="wrapper">
    <div class="avatar">
      <el-upload action="" drag auto-upload="false"  :show-file-list="false" :before-upload='changeUpload'>
        <div class="demo-basic--circle">
          <el-avatar :src="circleUrl"></el-avatar>
        </div>
      </el-upload>
    </div>
    <div v-if="isMember">
      <el-form :model="form"  :rules="rules" ref="form" label-width="50px" class="demo-ruleForm" label-position="left">
      <el-form-item label="名称" prop="name" >
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" >
        <el-input v-model="form.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="returnTo">取消</el-button>
      </el-form-item>
    </el-form>
    </div>
    <div v-if="isTeacher">
      <el-form :model="form"  :rules="rules" ref="form" label-width="50px" class="demo-ruleForm" label-position="left">
        <el-form-item label="名称" prop="name" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduce" >
          <el-input type="textarea" v-model="form.introduce" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别"  prop="sex">
          <el-select v-model="form.sex">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
          <el-button @click="returnTo">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="isEmployee">
      <el-form :model="form"  :rules="rules" ref="form" label-width="50px" class="demo-ruleForm" label-position="left">
        <el-form-item label="名称" prop="name" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="编号" prop="no" >
          <el-input v-model="form.no" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别"  prop="sex">
          <el-select v-model="form.sex">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门"  prop="part">
          <el-select v-model="form.part">
            <el-option label="市场部" value="1"></el-option>
            <el-option label="策划部" value="2"></el-option>
            <el-option label="财务部" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
          <el-button @click="returnTo">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- vueCropper 剪裁图片实现-->
    <el-dialog title="图片剪裁" width="500px" :visible.sync="dialogVisible" append-to-body>
        <div class="cropper-content">
          <div class="cropper" style="text-align:center">
            <vueCropper
              ref="cropper"
              :img="option.img"
              :outputSize="option.size"
              :outputType="option.outputType"
              :info="true"
              :full="option.full"
              :canMove="option.canMove"
              :canMoveBox="option.canMoveBox"
              :original="option.original"
              :autoCrop="option.autoCrop"
              :fixed="option.fixed"
              :fixedNumber="option.fixedNumber"
              :centerBox="option.centerBox"
              :infoTrue="option.infoTrue"
              :fixedBox="option.fixedBox"
              @realTime="realTime"
            ></vueCropper>
          </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="finish"
                     v-loading.fullscreen.lock="fullscreenLoading">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
const uploadImg = require('smms')
export default {
  name: 'setprofile',
  data () {
    let check = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    }
    return {
      isMember: false,
      isTeacher: false,
      isEmployee: false,
      circleUrl: '',
      form: {
        password: '',
        name: '',
        no: '',
        sex: '',
        part: '',
        introduce: ''
      },
      rules: {
        password: [
          { validator: check, trigger: 'blur' }
        ],
        name: [
          { validator: check, trigger: 'blur' }
        ],
        no: [
          { validator: check, trigger: 'blur' }
        ],
        sex: [
          { validator: check, trigger: 'blur' }
        ],
        introduce: [
          { validator: check, trigger: 'blur' }
        ],
        part: [
          { validator: check, trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 300, // 默认生成截图框宽度
        autoCropHeight: 300, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [5, 5], // 截图框的宽高比例
        full: false, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      fullscreenLoading: false
    }
  },
  computed: {
    ...mapState({
      current: 'current'
    })
  },
  methods: {
    ...mapMutations(['EDITINFO']),
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.current === '1') {
            this.http.post(this.ports.personalCenter.member.info, {
              icon: this.circleUrl,
              password: this.form.password,
              name: this.form.name
            }, res => {
              if (res.status === 200) {
                let data = res.data.result
                if (data.code === 200) {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: 'success',
                    duration: '1500'
                  })
                  let info = {
                    circleUrl: this.circleUrl,
                    name: this.form.name
                  }
                  this.EDITINFO(info)
                  setTimeout(() => {
                    this.returnTo()
                  }, 1500)
                } else if (data.code === 1 || data.code === -1) {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: 'error'
                  })
                }
              } else {
                console.log(res)
              }
            })
          } else if (this.current === '2') {
            this.http.post(this.ports.personalCenter.employee.info, {
              icon: this.circleUrl,
              password: this.form.password,
              name: this.form.name,
              no: this.form.no,
              sex: this.form.sex,
              part: this.form.part
            }, res => {
              if (res.status === 200) {
                let data = res.data.result
                console.log(data)
                if (data.code === 200) {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: 'success',
                    duration: '1500'
                  })
                  let info = {
                    circleUrl: this.circleUrl,
                    name: this.form.name
                  }
                  this.EDITINFO(info)
                  setTimeout(() => {
                    this.returnTo()
                  }, 1500)
                } else if (data.code === 1 || data.code === -1) {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: 'error'
                  })
                }
              } else {
                console.log(res)
              }
            })
          } else if (this.current === '4') {
            this.http.post(this.ports.personalCenter.teacher.info, {
              icon: this.circleUrl,
              password: this.form.password,
              name: this.form.name,
              introduce: this.form.introduce,
              sex: this.form.sex
            }, res => {
              if (res.status === 200) {
                let data = res.data.result
                console.log(data)
                if (data.code === 200) {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: 'success',
                    duration: '1500'
                  })
                  let info = {
                    circleUrl: this.circleUrl,
                    name: this.form.name
                  }
                  this.EDITINFO(info)
                  setTimeout(() => {
                    this.returnTo()
                  }, 1500)
                } else if (data.code === 1 || data.code === -1) {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: 'error'
                  })
                }
              } else {
                console.log(res)
              }
            })
          }
          console.log('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('只能上传jpg的文件!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
        return false
      }
      let URL = null
      if (window.createObjectURL !== undefined) {
        URL = window.createObjectURL(file)
      } else if (window.URL !== undefined) {
        URL = window.URL.createObjectURL(file)
      } else if (window.webkitURL !== undefined) {
        URL = window.webkitURL.createObjectURL(file)
      }
      this.$nextTick(() => {
        this.option.img = URL
        this.dialogVisible = true
      })
    },
    finish () {
      this.$refs['cropper'].getCropBlob((data) => {
        if (data) {
          this.fullscreenLoading = true
          setTimeout(() => {
            let files = new window.File([data], 'avatar.jpg')
            uploadImg(files).then(data => {
              this.fullscreenLoading = false
              this.circleUrl = data.data.url
              this.dialogVisible = false
            })
          }, 2000)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    returnTo () {
      if (this.current === '1') {
        this.$router.push('/personalCenter/pcClass')
      } else if (this.current === '2') {
        this.$router.push('/personalCenter/pcNews')
      } else if (this.current === '4') {
        this.$router.push('/personalCenter/myClass')
      }
    }
  },
  mounted: function () {
    if (this.$route.query.type === '1') {
      this.isMember = true
      this.http.get(this.ports.personalCenter.member.info,
        res => {
          if (res.status === 200) {
            let data = res.data.result
            this.circleUrl = data.memberIcon
            this.form.password = data.memberPass
            this.form.name = data.memberName
          } else if (res.status === 401) {
            this.$router.push('/')
          } else {
            console.log(res)
          }
        })
    } else if (this.$route.query.type === '2') {
      this.isEmployee = true
      this.http.get(this.ports.personalCenter.employee.info,
        res => {
          if (res.status === 200) {
            let data = res.data.result
            this.circleUrl = data.employeeIcon
            this.form.password = data.employeePass
            this.form.name = data.employeeName
            this.form.no = data.defaultNo
            this.form.part = data.defaultPart
            this.form.sex = data.employeeSex
          } else if (res.status === 401) {
            this.$router.push('/')
          } else {
            console.log(res)
          }
        })
    } else if (this.$route.query.type === '4') {
      this.isTeacher = true
      this.http.get(this.ports.personalCenter.teacher.info,
        res => {
          if (res.status === 200) {
            let data = res.data.result.msg
            this.circleUrl = data.teacherIcon
            this.form.password = data.teacherPass
            this.form.name = data.teacherName
            this.form.sex = data.teacherSex
            this.form.introduce = data.teacherIntroduce
          } else if (res.status === 401) {
            this.$router.push('/')
          } else {
            console.log(res)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrapper{
    padding: 2rem 0 0 0;
    display: flex;
    justify-content: center;
  }
  .el-form{
    margin: 0 0 0 1rem;
    width: 300px;
    color: #fff;
    flex-shrink: 0;
  }
  .dialog-footer{
    margin: 50px auto 100px auto;
    width:100%;
  }
  .el-button{
  }
  .el-form-item{
    margin-bottom: 0.5rem;
  }
  .el-avatar {
    width:130px;
    height:130px;
  }
  .el-input {
  }
  // 截图
  .cropper-content {
    .cropper {
      width: auto;
      height: 300px;
    }
  }
  .demo-basic--circle{
    width: 0;
  }
  .avatar{
    width:130px;
    height:130px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow:2px 2px 10px #4d555d;
    padding: 0;
    border: solid 2px #ffffff;
    margin-left: -2rem;
  }
  .dialog-footer{
    display: flex;
    justify-content: flex-end;
  }
</style>
